/* stylelint-disable selector-max-id */

/**
 * General styles
 *
 */

.wpcom-site__global-noscript {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 6px;
	color: var( --color-text-inverted );
	background: rgba( var( --color-neutral-70-rgb ), 0.8 );
	text-align: center;
	z-index: z-index( 'root', '.wpcom-site__global-noscript' );
}

/* =Global
----------------------------------------------- */

@-webkit-viewport {
	width: device-width;
}
@-moz-viewport {
	width: device-width;
}
@-ms-viewport {
	width: device-width;
}
@-o-viewport {
	width: device-width;
}
@viewport {
	width: device-width;
}

// make sure layout can fill the viewport
html,
body,
.wpcom-site {
	height: 100%;
}

* {
	-webkit-tap-highlight-color: rgba( 0, 0, 0, 0 );
}

body {
	background: var( --color-surface-backdrop );
	color: var( --color-text );
	font-size: $font-body;
	line-height: 1.5;

	-ms-overflow-style: scrollbar;

	// This fixes an issue with the `click-outside` package not working on mobile.
	// Specifically, this makes clicking outside a popover work on touch devices. -shaun
	@include breakpoint-deprecated( '<660px' ) {
		cursor: pointer;
	}
}

::selection {
	background: rgba( var( --color-primary-light-rgb ), 0.7 );
	color: var( --color-text );
}

button {
	font-size: $font-body-small;
}

body,
button,
input,
select,
textarea,
.button,
#footer,
#footer a.readmore {
	font-family: $sans;
}

/*!rtl:ignore*/
body.rtl,
.rtl button,
.rtl input,
.rtl select,
.rtl textarea,
.rtl .button,
.rtl #footer,
.rtl #footer a.readmore {
	font-family: $sans-rtl;
}

/*!rtl:ignore*/
:lang( he ) body.rtl,
:lang( he ) .rtl button,
:lang( he ) .rtl input,
:lang( he ) .rtl select,
:lang( he ) .rtl textarea,
:lang( he ) .rtl .button,
:lang( he ) .rtl #footer,
:lang( he ) .rtl #footer a.readmore {
	font-family: $sans;
}

/*!rtl:ignore*/
.rtl {
	.gridicon {
		&.gridicons-chevron-left,
		&.gridicons-chevron-right,
		&.gridicons-arrow-left,
		&.gridicons-arrow-right,
		&.gridicons-external,
		&.gridicons-cart {
			transform: scaleX( -1 );
		}
	}
}

.notifications {
	display: inherit;
}

noscript {
	text-align: center;
	margin-top: 3em;
	display: block;
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}
hr {
	background: var( --color-neutral-10 );
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

/* Text elements */
p {
	margin-bottom: 1.5em;
}
ul,
ol {
	margin: 0 0 1.5em 3em;
}
ul {
	list-style: disc;
}
ol {
	list-style: decimal;
}
ul ul,
ol ol,
ul ol,
ol ul {
	margin-bottom: 0;
	margin-left: 1.5em;
}
dt {
	font-weight: 600;
}
dd {
	margin: 0 1.5em 1.5em;
}
b,
strong {
	font-weight: 600;
}
dfn,
cite,
em,
i {
	font-style: italic;
}
blockquote {
	margin: 10px 0 0;
	background: var( --color-neutral-0 );
	padding: 10px 10px 1px;
	border-radius: 2px;
}
address {
	margin: 0 0 1.5em;
}
pre {
	background: var( --color-neutral-0 );
	font-family: $monospace;
	font-size: $font-body;
	line-height: 1.6;
	margin-bottom: 1.6em;
	padding: 1.6em;
	overflow: auto;
	max-width: 100%;
}
code,
kbd,
tt,
var {
	font: 15px $code;
}
abbr,
acronym {
	border-bottom: 1px dotted var( --color-neutral-10 );
	cursor: help;
	// Prevent double underline in Chrome
	text-decoration: none;
}
mark,
ins {
	background: var( --color-warning-light );
	text-decoration: none;
}
small {
	font-size: 75%;
}
big {
	font-size: 125%;
}
figure {
	margin: 0;
}
table {
	margin: 0 0 1.5em;
	width: 100%;
}
th {
	font-weight: 600;
}

.hide,
.hidden {
	display: none;
}

/* Links */
a {
	text-decoration: none;
}

a,
a:visited {
	color: var( --color-link );
}

a:hover,
a:focus,
a:active {
	color: var( --color-link-dark );
}

.link--caution,
.link--caution:visited,
.is-link.link--caution,
.is-link.link--caution:visited {
	&,
	&:hover,
	&:focus,
	&:active {
		color: var( --color-error );
	}
}

html.iframed {
	overflow: hidden;
}

/* Emoji and smileys */
img.emoji,
img.wp-smiley {
	height: 1em;
	max-height: 1em;
	display: inline;
	margin: 0;
	padding: 0 0.2em;
	vertical-align: -0.1em;
	width: 1em;
}

/* =Media
----------------------------------------------- */

img {
	max-width: 100%; /* Fluid images for posts, comments, and widgets */
	height: auto;
}

/* Make sure embeds and iframes fit their containers */
embed,
iframe,
object {
	max-width: 100%;
}

/* Netter min-height for the SoundCloud embeds */
.wpcom-soundcloud-player,
.embed-soundcloud iframe {
	min-height: 150px;
}

// added to the html element when we don't want the background content to scroll
html.no-scroll {
	overflow: hidden;
}
